<script lang="ts" setup>

import { useRouter } from 'vue-router';
import { Picture as IconPicture } from '@element-plus/icons-vue'
import type { ImageProps } from 'element-plus'
const router = useRouter()
const goBack = () => {
    router.push('/variety/list'); // 返回上一页
};

const fits = [
    'fill',
    'contain',
    'cover',
    'none',
    'scale-down',
] as ImageProps['fit'][]
const url =
    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

import { handleError, ref, nextTick, onMounted } from 'vue'
const pet = ref({
    id: '',
    name: '',
    nickName: '',
    pic: '',
    minAge: '',
    maxAge: '',
    gender: '',
    size: '',
    hairColor: '',
    hairSize: '',
    minWeight: '',
    maxWeight: '',
    origin: '',
    capabilities: '',
    baseInfo: '',
    conservation: '',
});

import { petGetItemService, petDeleteService } from '@/api/pet';
import { ElMessage, ElMessageBox } from 'element-plus';
const category = ref()

//获取后端pet数据
const getPetItem = async () => {    
    category.value = router.currentRoute.value.query.category
    let result = await petGetItemService(category.value);
    if (result.data === null) pet.value= null
    pet.value = result.data;
}
getPetItem();

const deletePet =async () => {
    let result = await petDeleteService(pet.value.id);
    ElMessage.success(result.msg ? result.msg : '删除成功')
};

const editPet = () => {
    router.push('/pet/update?id=' + pet.value.id);
};


const carousel = ref(null);
const activeIndex = ref(0);
const handleWheel = (event: { preventDefault: () => void; deltaY: number; }) => {
    // 阻止默认的滚轮行为
    event.preventDefault();
    // 根据滚轮方向改变 activeIndex
    if (event.deltaY < 0 && activeIndex.value !== 0) {
        // 向上滚动，切换到上一个走马灯项
        carousel.value.prev();
        activeIndex.value = (activeIndex.value - 1) % 4

    } else if (event.deltaY > 0 && activeIndex.value !== 3) {
        // 向下滚动，切换到下一个走马灯项
        carousel.value.next();
        activeIndex.value = (activeIndex.value + 1) % 4
    }
}
</script>
<template>
    <!-- 顶部按钮 -->
    <el-row class="button-container">
        <el-button type="primary" @click="goBack" class="goBack">返回</el-button>
        <div v-if="pet.id">
            <el-button type="danger" icon="el-icon-delete" @click="deletePet">删除</el-button>
            <el-button type="success" icon="el-icon-edit" @click="editPet">修改</el-button>
        </div>
    </el-row>
    <div v-if="pet.id">
        <el-container>
            <el-header>
                <!-- 宠物名和别名 -->
                <el-row class="name-container">
                    <span class="pet-name">{{ pet.name }}</span>
                    <span class="pet-nickname">- {{ pet.nickName }}</span>
                </el-row>
            </el-header>
            <el-main>
                <el-carousel ref="carousel" direction="vertical" :autoplay="false" :interval="5000" arrow="always"
                    height="400px" @wheel="handleWheel">
                    <!-- 宠物图片 -->
                    <el-carousel-item>
                        <div class="image-container">
                            <el-image :src="pet.pic" fit="contain" style="width: 80%; height: 80%;"
                                @error="handleError">
                                <!-- 占位 -->
                                <template #placeholder>
                                    <div></div>
                                </template>
                                <!-- 加载错误 -->
                                <template #error>
                                    <el-icon style="width: 80%; height: 80%;"><icon-picture /></el-icon>
                                </template>
                            </el-image>
                        </div>
                    </el-carousel-item>

                    <!-- 宠物基本信息 -->
                    <el-carousel-item>
                        <div class="items-container">
                            <div style="display: flex; justify-content: center; margin-bottom: 30px;">
                                <el-text style="font-size: larger;">宠物基本信息</el-text>
                            </div>
                            <el-row :gutter="20">
                                <el-col :span="6" :offset="6">
                                    <div class="items">
                                        毛色：<el-text class="mx-1" size="large">{{ pet.hairColor }}</el-text>
                                    </div>
                                </el-col>
                                <el-col :span="6" :offset="2">
                                    <div class="items">
                                        毛发：<el-text class="mx-1" size="large">{{ pet.hairSize }}</el-text>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="6" :offset="6">
                                    <div class="items">
                                        寿命：<el-text class="mx-1" size="large">{{ pet.minAge }} - {{ pet.maxAge
                                            }}</el-text>
                                    </div>
                                </el-col>
                                <el-col :span="6" :offset="2">
                                    <div class="items">
                                        起源地：<el-text class="mx-1" size="large">{{ pet.origin }}</el-text>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="6" :offset="6">
                                    <div class="items">
                                        体重：<el-text class="mx-1" size="large">{{ pet.minWeight }} - {{ pet.maxWeight
                                            }}</el-text>
                                    </div>
                                </el-col>
                                <el-col :span="6" :offset="2">
                                    <div class="items">
                                        体型：<el-text class="mx-1" size="large">{{ pet.size }}</el-text>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="6" :offset="6">
                                    <div class="items">
                                        担任工作：<el-text class="mx-1" size="large">{{ pet.capabilities }}</el-text>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-carousel-item>

                    <!-- 宠物描述 -->
                    <el-carousel-item>
                        <div class="description-container">
                            <!-- 宠物描述内容 -->
                            <div class="items-container">
                                <div style="display: flex; justify-content: center; margin-bottom: 30px;">
                                    <el-text style="font-size: larger;">宠物描述</el-text>
                                </div>
                            </div>
                            <div class="base-text">
                                <el-text>{{ pet.baseInfo }}</el-text>
                            </div>
                        </div>
                    </el-carousel-item>

                    <!-- 宠物基本喂养知识 -->
                    <el-carousel-item>
                        <div class="feeding-knowledge-container">
                            <!-- 宠物基本喂养知识内容 -->
                            <div class="items-container">
                                <div style="display: flex; justify-content: center; margin-bottom: 30px;">
                                    <el-text style="font-size: larger;">宠物基本喂养知识</el-text>
                                </div>
                                <div class="base-text">
                                    <el-text>{{ pet.conservation }}</el-text>
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </el-main>
        </el-container>
    </div>
</template>
<style scoped>
/* 顶部按钮 */
.button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.goBack {
    margin-right: auto;
}

/* 宠物名字和别名 */
.name-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-bottom: 20px;
}

.pet-name {
    font-size: 24px;
    font-weight: bold;
}

.pet-nickname {
    font-size: 14px;
    color: #808080;
}

/* 图片 */
.image-container {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    height: 100%;
}

/* 宠物基本信息 */
.items-container {
    justify-content: center;
    margin-top: 60px;
}

.items {
    margin: 20px
}

.base-text {
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 40px;
    align-items: center;
}
</style>